<template>
	<ul class="flex w-100" v-for="(row, rk) in data" :key="rk">
		<li style="width:48px;margin-right: 4px;" v-if="icon">
      <img :src="phoneIcon" class="icon-img" v-if="icon =='phone'"/>
      <img :src="idCardIcon"  class="icon-img" v-if="icon =='idCard'"/>
    </li>
		<li v-for="(item, index) in columns" :key="index" :style="{width:item.width,flex:item.width?'':1}">
			<span v-if="item.showLabel !==false">{{ item.label }}</span>
			<span v-if="item.type !=='upload'">{{ row[item.propName||item.prop] }}</span>
      <FileList v-else imgSize="48" :label="{label:item.label}" :value="row[item.propName||item.prop]"></FileList>
		</li>
	</ul>
</template>

<script setup lang="ts">
import phoneIcon from '@/assets/icons/phone.png'
import idCardIcon from '@/assets/icons/idCard.png'
import FileList from '../ContentListItem/FileList/index.vue'

defineProps<{
  icon?:string
	columns: any
	data: any
}>()

</script>

<style scoped>
.icon-img {
  width:48px;
  height: 48px;
}
</style>
